<!DOCTYPE html>
<html lang="en">
<head>
    <title>Codevember #1 - Galaxy</title>
    <meta charset="utf-8">
    <meta name="generator" content="Three.js Editor">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: sans-serif;
            font-size: 13px;
            background-color: #000;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body ontouchstart="">
<script src="./js/three.min.js"></script>
<script src="./js/app.js"></script>

<script>

    var loader = new THREE.FileLoader();
    loader.load('app.json', function (text) {
        var player = new APP.Player();
        player.load(JSON.parse(text));
        player.setSize(window.innerWidth, window.innerHeight);
        player.play();

        document.body.appendChild(player.dom);

        window.addEventListener('resize', function () {
            player.setSize(window.innerWidth, window.innerHeight);
        });
    });

    var button = document.createElement('a');
    button.href = 'https://threejs.org/editor/#file=' + location.href.split('/').slice(0, -1).join('/') + '/app.json';
    button.style.cssText = 'position: absolute; bottom: 20px; right: 20px; padding: 12px 14px; color: #fff; border: 1px solid #fff; border-radius: 4px; text-decoration: none;';
    button.target = '_blank';
    button.textContent = 'EDIT';
    document.body.appendChild(button);
    function random() {
        return Math.random() * 2 - 1
    }
    function createGeometry(amount, step) {
        var vertices = [];
        for (var i = 200; i < amount; i += step) {
            var angle = i / 1200;
            var distance = i / 600;
            var progress = ( i / amount ) * 4 + 0.5;
            vertices.push(tprogress * random() * random() + Math.sin(angle) * distance, progress * random() * random(), progress * random() * random() + Math.cos(angle) * distance);
        }
        var geometry = new THREE.BufferGeometry();
        geometry.addAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
        return geometry;
    }


</script>
</body>
</html>
